<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>https://codepen.io/ispal/pen/LxjgEj</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
</head>
<body translate="no">
<button class="btn-nav">
    <div class="bar arrow-top-r"></div>
    <div class="bar arrow-middle-r"></div>
    <div class="bar arrow-bottom-r"></div>
</button>
<div class="links-con">
    <a href="https://codepen.io/tonkec/full/zbRKKK" target="_blank" class="nav new">NEW VERSION</a>
    <a href="https://antonijasimic.bitbucket.io/text_hover_effects/index.html" target="_blank" class="nav">Home</a>
    <a href="https://antonijasimic.bitbucket.io/text_hover_effects/documentation.html" target="_blank" class="nav">Docs</a>
    <a href="https://github.com/tonkec/text_hover_effects" class="nav" target="_blank">Download</a>
</div>
<main>
    <aside class="left-side hidden hideNav">
        <ul class="effects-list">
            <li class="item-divider">Underline</li>
            <li class="item item-active">underline-left</li>
            <li class="item">underline-right</li>
            <li class="item">underline-closing</li>
            <li class="item">underline-opening</li>

            <li class="item-divider">Double Underline</li>
            <li class="item">double-underline-left</li>
            <li class="item">double-underline-right</li>
            <li class="item">double-underline-opening</li>
            <li class="item">double-underline-left-right</li>
            <li class="item">double-underline-right-left</li>

            <li class="item-divider">Overline</li>
            <li class="item">overline-left</li>
            <li class="item">overline-right</li>
            <li class="item">overline-closing</li>
            <li class="item">overline-opening</li>

            <li class="item-divider">One Side</li>
            <li class="item">left-down</li>
            <li class="item">left-up</li>
            <li class="item">right-down</li>
            <li class="item">right-up</li>

            <li class="item-divider">Moves</li>
            <li class="item">move-down</li>
            <li class="item">move-up</li>
            <li class="item">move-right</li>
            <li class="item">move-left</li>
            <li class="item">move-vertical</li>
            <li class="item">move-horizontal</li>

            <li class="item-divider">Both Sides</li>
            <li class="item">both-down</li>
            <li class="item">both-up</li>
            <li class="item">both-right</li>
            <li class="item">both-left</li>
            <li class="item">left-up-right-down</li>
            <li class="item">left-down-right-up</li>
            <li class="item">both-opening-horizontal</li>
            <li class="item">overline-left-underline-right</li>
            <li class="item">overline-right-underline-left</li>

            <li class="item-divider">Fills</li>
            <li class="item">fill-left</li>
            <li class="item">fill-right</li>
            <li class="item">fill-down</li>
            <li class="item">fill-up</li>
            <li class="item">fill-closing-vertical</li>
            <li class="item">fill-closing-horizontal</li>
            <li class="item">fill-opening-horizontal</li>

            <li class="item-divider">Fill Corners</li>
            <li class="item">fill-top-left</li>
            <li class="item">fill-top-right</li>
            <li class="item">fill-bottom-left</li>
            <li class="item">fill-bottom-right</li>

            <li class="item-divider">Corners Close</li>
            <li class="item">left-bottom</li>
            <li class="item">left-top</li>
            <li class="item">right-top</li>
            <li class="item">right-bottom</li>

            <li class="item-divider">Corners Expand</li>
            <li class="item">bottom-right</li>
            <li class="item">bottom-left</li>
            <li class="item">top-left</li>
            <li class="item">top-right</li>

            <li class="item-divider">Linethrough</li>
            <li class="item">linethrough-left</li>
            <li class="item">linethrough-right</li>
            <li class="item">linethrough-opening</li>
            <li class="item">linethrough-closing</li>

            <li class="item-divider">Double Linethrough</li>
            <li class="item">double-linethrough-left</li>
            <li class="item">double-linethrough-right</li>
            <li class="item">double-linethrough-left-right</li>
            <li class="item">double-linethrough-right-left</li>
            <li class="item">double-linethrough-opening</li>

            <li class="item-divider">Delays</li>
            <li class="item">double-underline-right-delayed</li>
            <li class="item">top-left-delay</li>
            <li class="item">right-bottom-delay</li>
            <li class="item">double-underline-opening-delayed</li>
            <li class="item">double-linethrough-left-delayed</li>
            <li class="item">double-linethrough-opening-delayed</li>
            <li class="item">fill-closing-horizontal-delayed</li>
            <li class="item">both-left-delayed</li>
        </ul>
    </aside>
    <aside class="right-side">
        <div class="text-con">
            <span class="underline-left">Hover me</span>
        </div>
    </aside>

    <a href="https://codepen.io/tonkec" class="ua" target="_blank">
        <i class="fa fa-user"></i></a>
</main>
</body>

<script src="script.js"></script>
</html>